<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>Home Page</title>
<script type="text/javascript">
	function showText() {
		var sty = document.getElementById("con");
		sty.style.display = "block";
	}
	function hideText() {
		var sty = document.getElementById("con");
		sty.style.display = "none";
	}
	function changeColor() {
		var sty = document.getElementById("con");
		sty.style.backgroundColor = "red";
	}
	function cancleColor() {
		var sty = document.getElementById("con");
		sty.style.backgroundColor="white";
		sty.className="tag";
	}
	function changeStyle() {
		var sty = document.getElementById("con");
		sty.className = "one";
	}
</script>

<style type="text/css">
.one {
	color: green;
	font-size: 15px;
	border: 2px dashed red;
}
.tag{ 
  color:black;
  font-size:normal; 
    border :0px  solid  white;
      }
</style>
</head>
<body>
	<H1>The Home Pages</H1>
	<p id="con">翠翠虽被那乡绅女孩喊到身边去坐，地位非常之好，从窗口望出去，河中一切朗然在望，然而心中可不安宁。</p>
	<form>
		<input type="button" onClick="showText()" value="显示" /> 
		<input type="button" onClick="hideText()" value="隐藏" /> 
		<input type="button" onClick="changeColor()" value="背景色" /> 
			<input type="button" onClick="cancleColor()" value="重置" /> 
			<input type="button" onClick="changeStyle()" value="改变样式" />
	</form>
</body>
</html>